<template>
  <div
    class="plate"
    :style="isSelect?activeStyle:''"
    @mouseenter="onMouseEnter"
    @mouseleave="onMouseLeave"
  >
    <svg-icon class="icon" :icon-class="isSelect?selectIcon:iconClass" />
    <p :style="textStyle">{{ text }}</p>
  </div>
</template>

<script>
export default {
  name: 'Plate',
  props: {
    active: {
      type: Boolean,
      default: false
    },
    iconClass: {
      type: String,
      default: undefined
    },
    selectIcon: {
      type: String,
      default: undefined
    },
    text: {
      type: String,
      default: undefined
    },
    textColor: {
      type: String,
      default: undefined
    },
    borderColor: {
      type: String,
      default: undefined
    },
    bgColor: {
      type: String,
      default: undefined
    }
  },
  watch: {
    active(newValue) {
      this.isSelect = newValue
    }
  },
  data() {
    return {
      isSelect: this.active,
      textStyle: {
        color: this.textColor
      },
      activeStyle: {
        cursor: 'pointer',
        backgroundColor: this.bgColor,
        border: `2px solid ${this.borderColor}`,
        fontWeight: 'bold'
      },
      isSwitch: true
    }
  },
  methods: {
    onMouseEnter() {
      if (!this.active) {
        this.isSelect = true
      }
    },
    onMouseLeave() {
      if (!this.active) {
        this.isSelect = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.plate {
  padding: 3px;
  border: 2px solid transparent;
  margin: 0 10px;
  border-radius: 10px;
  .icon {
    font-size: 40px;
  }
  p {
    text-align: center;
    font-size: 15px;
    margin: 0;
  }
}
</style>
